<template>
	<view>
		<view>
			<image :src="apiurl+img" style="width: 100%;vertical-align: bottom;"></image>
		</view>
		<view class="info">
			<view class="moneyLayer">
				<view><text class="project-tip">金额（元）</text></view>
				<view><input class='moneyInput' :disabled="amountDisabled" v-model="model.amount" placeholder="请输入金额"/></view>
			</view>
			<view>
				
				<view v-if="moduleList && moduleList.length>0"><text class="project-tip">选择项目</text></view>
				<view v-if="moduleList && moduleList.length>0"><text class="active-tip">{{model.moduleName}}</text></view>
				<view>
					<uni-row>
						<uni-col :span="8" v-for="(item,index) in moduleList">
							<view class="item">
								<text class="item-span" :class="{'active':item.id===model.moduleId}" @click="setSelectId(item.id,item.name,item.amount)">{{item.name}}</text>
							</view>
						</uni-col>
					</uni-row>
				</view>
				<view class="hline"></view>
				<view>
					<textarea class="remark" v-model="model.remark" maxlength="300" placeholder="请输入留言内容..."></textarea>
				</view>
			</view>
		</view>
		<view>
			<img src="../../static/bg_line.png" style="width: 100%;vertical-align: top;height: 8px;">
		</view>
		<view>
			<uni-row>
				<uni-col :span="6">
					<text class="person-tip">姓名</text>
				</uni-col>
				<uni-col :span="18">
					<input name="name" v-model="model.name" class="person-input" value='' placeholder="请输入姓名（可选）"></input>
				</uni-col>
			</uni-row>
			<view class="hline"></view>
			<uni-row>
				<uni-col :span="6">
						<text class="person-tip">手机号</text>
				</uni-col>
				<uni-col :span="18">
					<input name="mobile" v-model="model.mobile" class="person-input" value='' placeholder="请输入手机号（可选）"></input>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="12">
					<switch :checked="isOpen" class="person-tip" type="checkbox" @change="switchChange"/>
					<text class="person-tip">公开姓名</text>
				</uni-col>
				<uni-col :span="12">
					
				</uni-col>
			</uni-row>
		</view>
		<view>
			<button type="primary" class="confirm-btn" @click="submit">确定</button>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				model:{},
				amountDisabled:false,
				apiurl:'',
				projectId:"",
				typeId:"",
				compnay:'',
				isOpen:false,
				moduleList:[],
				img:''
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad:function(option){
			
			 this.apiurl = getApp().globalData.staticUrl
		     this.projectId = option.id
			 this.typeId = option.typeId
			 this.img = option.img
			 this.$set(this.model,'donationId',option.id)
			 this.$set(this.model,'donationTypeId',option.typeId)
		     uni.setNavigationBarTitle({
		         title:option.name
		     })
			
			 
			 console.log(this.apiurl+this.img)
			 
			 this.$http.get('/temple.donation/templeDonationModule/api/list', {
			 	'typeId':this.typeId,
				'pageSize':100
			 }).then((res) => {
				this.moduleList = res.data.result.records
				if(this.moduleList.length>0){
					var item = this.moduleList[0]
					this.setSelectId(item.id,item.name,item.amount)
				}
			 })
			 var that = this
			 uni.login({
			 	success(res) {
			 		if (res.errMsg == 'login:ok') {
			 			that.$http.get('/wechat/getOpenId', {
			 				loading: 'hide',
			 				code: res.code
			 			}).then((ret) => {
			 				console.log(ret)
			 				uni.setStorageSync('session_key', ret.data.result.session_key);
			 				uni.setStorageSync('openid', ret.data.result.openid);
							that.wxLogin();
			 			});
			 		} else {
			 			uni.showModal({
			 				content: res.errMsg,
			 				showCancel: false
			 			})
			 		}
			 	}
			 })
			 
		},
		methods: {
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			weixinShare(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			setSelectId(id,name,amount){
				this.$set(this.model,'moduleId',id)
				this.$set(this.model,'moduleName',name)
				if(amount && amount>0){
					this.$set(this.model,'amount',amount)
					this.amountDisabled = true
				}else{
					this.$set(this.model,'amount','')
					this.amountDisabled = false
				}
				// this.model.selectId = id
				// this.model.selectName = name
			},
			submit(){
				console.log(this.hasLogin)
				//不用登陆
				// if(!this.hasLogin){
				// 	this.wxLogin()
				// 	return;
				// }
				this.$set(this.model,'isOpen',this.isOpen)
				if(!this.model.amount){
					uni.showToast({
						title: '请输入金额',
						icon:'error',
						duration: 1000
					});
				}else{
					var userInfo = uni.getStorageSync('userInfo')
					this.$set(this.model,'userId',userInfo.id)
					this.$set(this.model,'payChannel','weixin')
					console.log(this.model)
					
					this.$http.post('/temple.order/templeDonationOrder/api/add', 
						this.model
					).then((res) => {
						console.log(res)
						let that = this;
						var donationId = res.data.result.id
						uni.requestPayment({
						    provider: 'wxpay',    //支付类型-固定值
						    timeStamp: res.data.result.timeStamp, // 时间戳（单位：秒）
						    nonceStr: res.data.result.nonceStr, // 随机字符串
						    package: "prepay_id="+res.data.result.package, // 固定值
						    signType: res.data.result.signType, //固定值
						    paySign: res.data.result.paySign, //签名
						    success: function (res) {
						        console.log('success:' + JSON.stringify(res));
						        console.log("支付成功");
								that.goTo('/pages/donation/result?amount='+that.model.amount+'&moduleName='+that.model.moduleName+"&id="+donationId)
						    },
						    fail: function (err) {
						        console.log('fail:' + JSON.stringify(err));
						        console.log("支付失败");
								uni.showToast({
									title: err,
									icon:'error',
									duration: 1000
								});
						    }
						});
					})
				}
				
			},
			wxLogin() {
				let that = this;
				that.$http.get('/wechat/wechatLogin', {
					openId: uni.getStorageSync('openid'),
					parentId: uni.getStorageSync('uid') ? uni.getStorageSync('uid') : 0,
					nickName:'',//encodeURIComponent(infoRes.userInfo.nickName),
					avatarUrl:'', //infoRes.userInfo.avatarUrl,
					sex:'' //infoRes.userInfo.gender,
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						uni.removeStorageSync('uid');
						uni.setStorageSync("userInfo", res.data.result);
						that.$store.commit('login', res.data.result);
						// that.toast("登录成功");
						// setTimeout(function() {
						// 	uni.navigateBack();
						// }, 1000);
					}
				});
			},
			switchChange(e){
				this.isOpen = e.detail.value
			},
			goTo(url){
				// if (!this.hasLogin) {
				// 	this.wxLogin()
				// }else{
					uni.navigateTo({
						url: url 
					})
				// }
			}
		}
	}
</script>

<style scoped lang='scss'>
	.item{
		height: 40px;
		margin: 5px 0;
	}
	.item-span{
		display: block;
		width: 95%;
		height: 40px;
		line-height: 40px;
		margin: 0 auto;
		border: 1px solid #888;
		border-radius: 5px;
		font-size: 15px;
		color: #888;
		text-align: center;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.active{
		    border: 1px solid #FFD700;
		    color: #ff7e00;
	}
	
	.project-tip{
		    margin: 0 10px;
		    color: #888;
		    font-size: 14px;
	}
	.active-tip{
		    padding: 0 10px;
		    color: #ff7e00;
		    font-size: 14px;
		    word-break: break-all;
	}
	.hline{
		width: 100%;
		height: 1px;
		background: #eee;
	}
	.remark{
		isplay: block;
		float: left;
		box-sizing: border-box;
		width: 100%;
		height: 50px;
		padding: 10px;
		background: rgba(255,255,255,0);
		color: #333;
		font-size: 14px;
		resize: none;
	}
	.moneyLayer{
		border-bottom: 1px solid #eee;
	}
	.moneyInput{
		margin: 0 10px;
		    display: block;
		    width: 70%;
		    height: 40px;
		    line-height: 40px;
		    /* margin-left: 10px; */
		    background: rgba(255,255,255,0);
		    color: #333;
		    font-size: 20px;
	}
	.info{
		padding: 10px 0;
		background: url(../../static/bg_slash2.png) no-repeat center center;
		background-size: cover;
	}
	.input{
		height: 50px;
		margin-left: 80px;
	}
	.person-tip{
		box-sizing: border-box;
		height: 50px;
		line-height: 50px;
		padding-left: 10px;
		color: #888;
		font-size: 15px;
		text-align: left;
	}
	.person-input{
		height: 50px;
		line-height: 50px;
		color: #333;
		font-size: 15px;
	}
	.confirm-btn{
		margin: 20px 10px;
	}
</style>
